<template>
  <div>
      <div v-show="visible" @click="closeClick" class="showPhoto">
        <div class="imgcount">{{index+'/'+imgurl.length}}</div>
        <v-touch @swipeleft="left" @swiperight="right" style="margin:auto">
            <img class="img" :src="bigImg" alt="图片加载失败"   >
        </v-touch>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        bigImg:{
            type:String,
            default(){
                return ""
            }
        },
        visible:{
            type:Boolean,
            default(){
                return false;
            }
        },
        imgurl:{
            type:Array,
            default(){
                return []
            }
        }
    },
    data(){
        return{
            index:0,
        }
    },
     methods:{    
        closeClick(){//子组件可以使用 $emit 触发父组件的自定义事件
            this.$emit('closeClick');
        },
        //向左滑动
        left(){
            if(this.index<this.imgurl.length)
            this.$emit("changeBigImg",this.imgurl[this.index]);
            
        },
        //向右滑动
        right(){
            if(this.index-1>0)
            this.$emit("changeBigImg",this.imgurl[this.index-2]);
        }
 },
    beforeUpdate(){
        this.index = this.imgurl.indexOf(this.bigImg)+1;
       
    },
}
</script>
<style>
.showPhoto{
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: flex;
}
.imgcount{
     position: fixed;
    top: 20px;
    left: 50%;
    color: #ffff;
    font-size: 25px;
}
.img{
    width: 100%;
    overflow: hidden;
     margin: auto 0;
      text-align: center;
}

</style>